<template>
<div class="notification-center">
    <div class="notification-center-nav">
        <img src="./img/vector.png" alt="" @click="goBack" />
        <span class="title">{{ title }}</span>
        <span class="clear-btn" v-if="!details" @click="clearUnread">清除未读</span>
    </div>
    <!-- 消息列表 -->
    <van-list class="notification-center-list" v-if="!details" v-model="loading" :finished="finished" finished-text="没有更多了" @load="moreLoad" :immediate-check="false" offset="100">
        <div v-for="item in list" :key="item.id" class="item" @click="clickItem(item)">
            <div class="top">
                <span class="name">{{ item.typeStr }}
                    <span class="unread" v-if="item.is_read == 0"><em>未读</em></span></span>
                <span class="date">{{ item.created_at }}</span>
            </div>
            <div class="bottom">
                {{ item.remark }}
            </div>
        </div>
    </van-list>
    <!-- 消息列表详情 -->
    <div class="notification-center-item" v-if="details">
        <p class="title">{{ items.typeStr }}</p>
        <p class="content">
            {{ items.remark }}
        </p>
        <!-- <p class="info">若非您本人操作，请联系飞鹅人工客服处理</p> -->
        <p class="date">{{ items.created_at }}</p>
    </div>
</div>
</template>

<script>
import request from "@util/request";
import {
    getRequest,
    apiUrl
} from "@util/index";
import qs from "qs";
export default {
    data() {
        return {
            param: {},
            details: false,
            list: [],
            total: 0,
            loading: false,
            page: 1,
            items: null,
        };
    },
    computed: {
        finished() {
            return this.total !== null && this.page * 10 >= this.total;
        },
        title() {
            if (this.details) {
                return "消息详情";
            } else {
                return "店铺授权通知中心";
            }
        },
    },
    watch: {
        details(nv, ov) {
            if (nv) {
                document.title = "消息详情";
            } else {
                document.title = "店铺授权通知中心";
            }
        },
    },
    methods: {
        // 返回
        goBack() {
            if (this.details) {
                this.details = false;
            } else {
                // 跳转上个页面
                window.location.href = "shoplist_pro.php?pid=" + this.param.pid
            }
        },
        // 翻页
        moreLoad() {
            this.page++;
            this.loading = true;
            this.initList();
        },
        // 初始化数据
        initList() {
            request({
                method: "POST",
                url: apiUrl,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: {
                    action: "ShopService_getMessageLog",
                    page: this.page,
                    pid:2,
                },
                transformRequest: [
                    function (data) {
                        return qs.stringify(data);
                    },
                ],
            }).then((res) => {
                let _data = res.data;
                if (_data.ret == 0) {
                    this.list.push(..._data.data.list);
                    this.total = _data.data.total;
                    this.loading = false;
                }
            });
        },
        // 点击列表详情
        clickItem(item) {
            item.is_read = 1;
            request({
                method: "POST",
                url: apiUrl,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: {
                    action: "ShopService_getOneMessage",
                    id: item.id,
                },
                transformRequest: [
                    function (data) {
                        return qs.stringify(data);
                    },
                ],
            }).then((res) => {
                let _data = res.data;
                if (_data.ret == 0) {
                    this.items = _data.data;
                    this.details = true;
                }
            });
        },
        // 清除未读
        clearUnread() {
            request({
                method: "POST",
                url: apiUrl,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: {
                    action: "ShopService_setMessageIsRead",
                    pid:2
                },
                transformRequest: [
                    function (data) {
                        return qs.stringify(data);
                    },
                ],
            }).then((res) => {
                let _data = res.data;
                if (_data.ret == 0) {
                    this.list.map((item) => {
                        item.is_read = 1;
                    });
                }
            });
        },
    },
    mounted() {
        this.param = getRequest()
        this.initList();
    },
};
</script>

<style lang="less">
@import "index.less";
</style>
